<template>
  <div class="flow-picture-container">
    <div id="node_01" class="position-01 picture-item">
      项目立项及备案
    </div>
    <div class="dashed-line line-block">
      <div class="dashed-body">
        <div class="position-02 picture-item" id="node_02">
          <div class="triangle"></div>
          编制工可报告
          <div class="triangle _dwon"></div>
        </div>
        <div class="position-03 picture-item" id="node_09">
          <div class="triangle"></div>
          申请项目规划许可
        </div>
        <div class="position-04 picture-item" id="node_10">
          获准项目规划许可
        </div>
        <div class="position-05 picture-item" id="node_03">
          <div class="triangle _dwon"></div>
          申请备案
        </div>
        <div class="position-06 picture-item" id="node_04">
          <div class="triangle _dwon"></div>
          项目获准备案
        </div>
        <div class="frame-div" :class="[isFrame_1 && 'frame_active_1']"></div>
        <div class="position-07 picture-item" id="node_05">
          安全预评价报告编制、评审
        </div>
        <div class="position-08 picture-item" id="node_06">
          环保预评价登记、报告表、报告书编制评审(项目类别参考《建设项目环境影响评价分类管理名录
          2021 版》)
        </div>
        <div class="position-09 picture-item" id="node_07">
          职业卫生预评价报告编制、评审
        </div>
        <div class="position-10 picture-item" id="node_08">
          节能、节地、节水评价报告编制、评审(视具体项目而定)
        </div>
      </div>
    </div>
    <div class="position-11 picture-item" id="node_11">
      <div class="triangle"></div>
      勘察、设计招标、平行审查招标
    </div>
    <div class="position-12 picture-item" id="node_12">
      <div class="triangle"></div>
      初步设计
      <div class="triangle _dwon"></div>
    </div>
    <div class="position-13 picture-item" id="node_17">
      <div class="triangle"></div>
      施工图设计(专篇审查根据项目情况确定)
      <div class="triangle _dwon"></div>
    </div>
    <div class="dashed-line_2 line-block">
      <div class="dashed-body">
        <div class="position-14 picture-item" id="node_13">
          <div class="triangle _dwon"></div>
          编制初步设计
        </div>
        <div class="position-15 picture-item" id="node_14">
          <div class="triangle _dwon"></div>
          初步设计审查
        </div>
        <div class="position-16 picture-item" id="node_15">
          初步设计批复
        </div>
      </div>
    </div>
    <div class="dashed-line_3 line-block">
      <div class="dashed-body">
        <div class="position-17 picture-item" id="node_18">
          <div class="triangle _dwon"></div>
          编制施工图设计
        </div>
        <div class="position-18 picture-item" id="node_19">
          <div class="triangle _dwon"></div>
          施工图设计审查
        </div>
        <div class="position-19 picture-item" id="node_20">
          施工图设计批复
        </div>
      </div>
    </div>
    <div class="position-20 picture-item" id="node_16">
      <div class="triangle _dwon"></div>
      开展监理招标
    </div>
    <div class="position-21 picture-item" id="node_21">
      <div class="triangle _dwon"></div>
      开展施工招标、检测招标
      <div class="triangle _dwon_2"></div>
    </div>
    <div class="position-22 picture-item" id="node_22">
      <div class="triangle _dwon"></div>
      质量监督
      <div class="triangle _left"></div>
    </div>
    <div class="position-23 picture-item" id="node_25">
      <div class="triangle _left"></div>
      项目施工
    </div>
    <div class="position-24 picture-item" id="node_26">
      <div class="triangle _left"></div>
      项目监理预验收
    </div>
    <div class="position-25 picture-item" id="node_27">
      <div class="triangle _left"></div>
      交工质量核验
    </div>
    <div class="position-26 picture-item" id="node_31">
      <div class="triangle _left"></div>
      档案预验收
    </div>
    <div class="position-27 picture-item" id="node_32">
      <div class="triangle _left"></div>
      交工验收
    </div>
    <div class="position-28 picture-item" id="node_33">
      专项验收(具体根据项目情况开展)
    </div>
    <div class="dashed-line_4 line-block">
      <div class="dashed-body">
        <div class="position-29 picture-item" id="node_23">
          <div class="triangle _dwon"></div>
          质量监督申请
        </div>
        <div class="position-30 picture-item" id="node_24">
          出具质量监督通知书
        </div>
      </div>
    </div>
    <div class="dashed-line_5 line-block">
      <div class="dashed-body">
        <div class="position-31 picture-item" id="node_28">
          <div class="triangle _dwon"></div>
          质量鉴定申请
        </div>
        <div class="position-32 picture-item" id="node_29">
          <div class="triangle _dwon"></div>
          召开质量鉴定专家会
        </div>
        <div class="position-33 picture-item" id="node_30">
          <div class="triangle _dwon"></div>
          出具质量鉴定意见
        </div>
      </div>
    </div>
    <div class="dashed-line_6 line-block">
      <div class="dashed-body">
        <div class="position-34 picture-item" id="node_34">
          <div class="triangle _dwon"></div>
          消防验收
        </div>
        <div class="position-35 picture-item" id="node_35">
          <div class="triangle _dwon"></div>
          环保验收
        </div>
        <div class="position-36 picture-item" id="node_36">
          <div class="triangle _dwon"></div>
          安全验收
        </div>
        <div class="position-37 picture-item" id="node_37">
          <div class="triangle _dwon"></div>
          职业病验收
        </div>
        <div class="frame-div" :class="[isFrame_2 && 'frame_active_2']"></div>
        <div class="position-38 picture-item" id="node_38">
          <div class="triangle _right"></div>
          试运行
        </div>
        <div class="position-39 picture-item" id="node_39">
          <div class="triangle _dwon"></div>
          竣工财务审计
        </div>
      </div>
    </div>
    <div class="position-40 picture-item" id="node_40">
      <div class="triangle _dwon"></div>
      竣工质量鉴定
    </div>
    <div class="dashed-line_7 line-block">
      <div class="dashed-body">
        <div class="position-41 picture-item" id="node_41">
          <div class="triangle _dwon"></div>
          竣工质量鉴定申请
        </div>
        <div class="position-42 picture-item" id="node_42">
          <div class="triangle _dwon"></div>
          召开质量鉴定专家会
        </div>
        <div class="position-43 picture-item" id="node_43">
          <div class="triangle _dwon"></div>
          出具质量鉴定意见
        </div>
      </div>
    </div>
    <div class="position-44 picture-item" id="node_44">
      <div class="triangle _left"></div>
      档案验收
      <div class="triangle _right"></div>
    </div>
    <div class="dashed-line_8 line-block">
      <div class="dashed-body">
        <div class="position-45 picture-item" id="node_45">
          档案验收申请
        </div>
        <div class="position-46 picture-item" id="node_46">
          <div class="triangle _dwon"></div>
          召开档案验收会议
        </div>
        <div class="position-47 picture-item" id="node_47">
          <div class="triangle _dwon"></div>
          出具档案验收意见
        </div>
      </div>
    </div>
    <div class="position-48 picture-item" id="node_48">
      <div class="triangle _left"></div>
      编制竣工验收报告
      <div class="triangle _right"></div>
    </div>
    <div class="position-49 picture-item" id="node_49">
      竣工验收
      <div class="triangle _right"></div>
    </div>
    <div class="dashed-line_9 line-block">
      <div class="dashed-body">
        <div class="position-50 picture-item" id="node_50">
          申请竣工验收
        </div>
        <div class="position-51 picture-item" id="node_51">
          <div class="triangle _dwon"></div>
          召开竣工审查会
        </div>
        <div class="position-52 picture-item" id="node_52">
          <div class="triangle _dwon"></div>
          出具竣工验收核查报告
        </div>
      </div>
    </div>
    <div class="margin-div"></div>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    tenantCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isFrame_1: false,
      isFrame_2: false,
      nodeData: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        } else {
          this.nodeData = [];
          this.isFrame_1 = false;
          this.isFrame_2 = false;
          this.cancel();
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    getData() {
      if (!this.tenantCode) {
        return;
      }
      axios
        .post(
          `/probusiness/projectProcessChild/getListByProCode?proCode=${this.tenantCode}`,
          {},
          {
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
            },
          }
        )
        .then((res) => {
          let list = res?.data ?? [];
          let nestedArray = [];

          list.forEach((v) => {
            nestedArray.push(v.split(","));
          });

          let flatArray = this.flattenArray(nestedArray);

          flatArray.forEach((v) => {
            if (v < 10) {
              this.nodeData.push("0" + v);
            } else {
              this.nodeData.push(v);
            }
          });

          this.getNodeName();
        })
        .catch((_) => {
          this.nodeData = [];
        });
    },

    getNodeName() {
      var ids = document.querySelectorAll('[id^="node_"]');
      // 输出获取到的元素
      ids.forEach((el) => {
        // 获取元素的所有类名
        const classNames = el.className.split(/\s+/);
        // 获取元素的所有Id
        const elementId = el.id;
        let str = elementId.slice(-2);
        if (this.nodeData.includes(str)) {
          el.className = `${classNames[0]} ${classNames[1]} active`;

          if (this.nodeData.includes("04")) {
            this.isFrame_1 = true;
          }

          if (this.nodeData.includes("37")) {
            this.isFrame_2 = true;
          }
        }
      });
    },

    flattenArray(arr) {
      let result = [];
      arr.forEach((item) => {
        if (Array.isArray(item)) {
          result = result.concat(this.flattenArray(item));
        } else {
          result.push(item);
        }
      });
      return result;
    },
    cancel() {
      // 获取所有类名以'position-'开头的元素
      var elements = document.querySelectorAll('[class^="position-"]');
      elements.forEach((el) => {
        // 获取元素的所有类名
        const classNames = el.className.split(/\s+/);
        el.className = `${classNames[0]} ${classNames[1]}`;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.flow-picture-container {
  height: 100%;
  width: 100%;
  position: relative;
  .margin-div {
    position: absolute;
    left: 0;
    top: 930px;
    height: 20px;
    width: 300px;
  }
  .triangle {
    position: absolute;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 5px;
      width: 44px;
      height: 0;
      border-bottom: 1px solid #8c8c8c;
    }

    &::before {
      content: "";
      position: absolute;
      top: -4px;
      left: 48px;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-bottom: 5px solid #8c8c8c;
      transform: rotate(90deg);
    }
  }
  .picture-item {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #8c8c8c;
    text-align: center;
    background: @base-bg-color;
    border-radius: 4px;
  }
  .line-block {
    border-radius: 4px;
    border: 2px dashed #8c8c8c;
    background-color: @base-bg-color;
  }

  .position-01 {
    position: absolute;
    top: 50px;
    left: 50px;
    &::before {
      content: "";
      width: 33px;
      height: 0;
      border-bottom: 1px solid #8c8c8c;
      position: absolute;
      top: 14px;
      right: -34px;
    }
  }
  .dashed-line {
    position: absolute;
    width: 534px;
    height: 302px;
    left: 200px;
    top: 0;
    padding: 20px 20px;
    box-sizing: border-box;
    .dashed-body {
      position: relative;
      height: 100%;
      width: 100%;
      .position-02 {
        position: absolute;
        top: 0;
        left: 0;
        .triangle {
          top: 14px;
          right: 4px;
        }
        ._dwon {
          top: 72px;
          left: 0;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 32px;
          }
        }
      }
      .position-03 {
        position: absolute;
        top: 0;
        left: 150px;
        max-width: 130px;
        .triangle {
          top: 14px;
          right: 4px;
          &::after {
            width: 76px;
          }
          &::before {
            left: 80px;
          }
        }
        &::after {
          content: "报市规划局";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: -6px;
          right: -70px;
        }
      }
      .position-04 {
        position: absolute;
        top: 0;
        left: 360px;
        max-width: 130px;
      }
      .position-05 {
        position: absolute;
        top: 63px;
        left: 0;
        width: 102px;
        ._dwon {
          top: 25px;
          left: 48px;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 32px;
          }
        }
        &::after {
          content: "报市发改委";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 34px;
          right: -12px;
        }
      }
      .position-06 {
        position: absolute;
        top: 127px;
        left: 0;
        ._dwon {
          top: 14px;
          right: 5px;
        }
      }
      .frame-div {
        position: absolute;
        top: 96px;
        left: 149px;
        height: 136px;
        width: 92px;
        border: 1px solid #8c8c8c;
        border-right: 0;
      }

      .position-07 {
        position: absolute;
        top: 44px;
        left: 240px;
        width: 250px;
        &::before {
          content: "";
          width: 0.5px;
          height: 9px;
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          background: #8c8c8c;
        }
      }
      .position-08 {
        position: absolute;
        top: 84px;
        left: 240px;
        width: 250px;
        &::before {
          content: "";
          width: 0.5px;
          height: 9px;
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          background: #8c8c8c;
        }
      }
      .position-09 {
        position: absolute;
        top: 166px;
        left: 240px;
        width: 250px;
        &::before {
          content: "";
          width: 0.5px;
          height: 9px;
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          background: #8c8c8c;
        }
      }
      .position-10 {
        position: absolute;
        top: 206px;
        left: 240px;
        width: 250px;
      }
    }
  }
  .position-11 {
    position: absolute;
    top: 50px;
    left: 758px;
    width: 158px;
    .triangle {
      top: 25px;
      left: -30px;
      &::after {
        width: 18px;
      }
      &::before {
        left: 24px;
      }
    }
  }
  .position-12 {
    position: absolute;
    top: 50px;
    left: 964px;
    width: 104px;
    .triangle {
      top: 12px;
      left: -55px;
    }
    ._dwon {
      top: 25px;
      left: 52px;
      transform: rotate(90deg);
      &::after {
        width: 28px;
      }
      &::before {
        left: 32px;
      }
    }
  }
  .position-13 {
    position: absolute;
    top: 34px;
    left: 1132px;
    width: 178px;

    .triangle {
      top: 28px;
      left: -70px;
      &::after {
        width: 60px;
      }
      &::before {
        left: 64px;
      }
    }
    ._dwon {
      top: 45px;
      left: 82px;
      transform: rotate(90deg);
      &::after {
        width: 24px;
      }
      &::before {
        left: 29px;
      }
    }
  }
  .dashed-line_2 {
    position: absolute;
    width: 160px;
    height: 200px;
    left: 936px;
    top: 102px;
    padding: 10px 10px;
    box-sizing: border-box;
    .dashed-body {
      position: relative;
      height: 100%;
      width: 100%;
      .position-14 {
        width: 104px;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);

        ._dwon {
          top: 25px;
          left: 52px;
          transform: rotate(90deg);
          &::after {
            width: 35px;
          }
          &::before {
            left: 39px;
          }
        }
        &::after {
          content: "报市交通局";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 40px;
          right: -12px;
        }
      }
      .position-15 {
        width: 104px;
        position: absolute;
        left: 50%;
        top: 70px;
        transform: translateX(-50%);
        ._dwon {
          top: 25px;
          left: 52px;
          transform: rotate(90deg);
          &::after {
            width: 35px;
          }
          &::before {
            left: 39px;
          }
        }
        &::after {
          content: "市交通局";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 40px;
          right: -2px;
        }
      }
      .position-16 {
        width: 104px;
        position: absolute;
        left: 50%;
        top: 140px;
        transform: translateX(-50%);
      }
    }
  }
  .dashed-line_3 {
    position: absolute;
    width: 190px;
    height: 200px;
    left: 1126px;
    top: 102px;
    padding: 10px 10px;
    box-sizing: border-box;
    .dashed-body {
      position: relative;
      height: 100%;
      width: 100%;
      .position-17 {
        width: 120px;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);

        ._dwon {
          top: 25px;
          left: 52px;
          transform: rotate(90deg);
          &::after {
            width: 35px;
          }
          &::before {
            left: 39px;
          }
        }
        &::after {
          content: "报市交通局";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 40px;
          right: 2px;
        }
      }
      .position-18 {
        width: 120px;
        position: absolute;
        left: 50%;
        top: 70px;
        transform: translateX(-50%);
        ._dwon {
          top: 25px;
          left: 52px;
          transform: rotate(90deg);
          &::after {
            width: 35px;
          }
          &::before {
            left: 39px;
          }
        }
        &::after {
          content: "市交通局";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 40px;
          right: 14px;
        }
      }
      .position-19 {
        width: 120px;
        position: absolute;
        left: 50%;
        top: 140px;
        transform: translateX(-50%);
      }
    }
  }

  .position-20 {
    width: 104px;
    position: absolute;
    top: 328px;
    left: 963px;
    ._dwon {
      top: -34px;
      left: 54px;
      transform: rotate(90deg);
      &::after {
        width: 23px;
      }
      &::before {
        left: 28px;
      }
    }
  }
  .position-21,
  .position-22 {
    position: absolute;
    top: 328px;
    left: 1134px;
    width: 174px;
    ._dwon {
      top: -34px;
      left: 80px;
      transform: rotate(90deg);
      &::after {
        width: 23px;
      }
      &::before {
        left: 28px;
      }
    }
    ._dwon_2 {
      top: 25px;
      left: 80px;
      transform: rotate(90deg);
      &::after {
        width: 23px;
      }
      &::before {
        left: 28px;
      }
    }
  }
  .position-22 {
    top: 387px;
    z-index: 22;
    ._left {
      left: 4px;
      transform: rotate(180deg);
      &::after {
        width: 36px;
      }
      &::before {
        left: 40px;
      }
    }
    ._dwon {
      top: 25px;
      left: 80px;
      transform: rotate(90deg);
      &::after {
        width: 45px;
      }
      &::before {
        left: 48px;
      }
    }
    &::after {
      content: "报市执法支队";
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 12px;
      color: #8c8c8c;
      position: absolute;
      top: 52px;
      right: 15px;
    }
  }
  .position-23,
  .position-24,
  .position-25,
  .position-26,
  .position-27,
  .position-28 {
    position: absolute;
    top: 387px;
    left: 1018px;
    width: 76px;
    ._left {
      left: 4px;
      transform: rotate(180deg);
      &::after {
        width: 36px;
      }
      &::before {
        left: 40px;
      }
    }
  }
  .position-24 {
    width: 120px;
    left: 858px;
    ._left {
      &::after {
        width: 50px;
      }
      &::before {
        left: 54px;
      }
    }
  }
  .position-25 {
    width: 120px;
    left: 684px;
    ._left {
      &::after {
        width: 60px;
      }
      &::before {
        left: 64px;
      }
    }
  }
  .position-26 {
    width: 120px;
    left: 500px;
    ._left {
      &::after {
        width: 80px;
      }
      &::before {
        left: 84px;
      }
    }
    &::after {
      content: "市交通局";
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 12px;
      color: #8c8c8c;
      position: absolute;
      top: -10px;
      left: -66px;
    }
  }
  .position-27 {
    width: 120px;
    left: 296px;
  }
  .position-28 {
    width: 148px;
    left: 108px;
  }

  .dashed-line_4 {
    position: absolute;
    height: 150px;
    width: 190px;
    left: 1126px;
    top: 434px;
    padding: 30px 20px 20px 20px;
    box-sizing: border-box;
    .dashed-body {
      position: relative;
      height: 100%;
      width: 100%;
      .position-29 {
        margin: 0 0 40px 0;
        ._dwon {
          top: 25px;
          left: 67px;
          transform: rotate(90deg);
          &::after {
            width: 38px;
          }
          &::before {
            left: 41px;
          }
        }
        &::after {
          content: "市执法支队";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 40px;
          right: 14px;
        }
      }
    }
  }
  .dashed-line_5 {
    position: absolute;
    left: 640px;
    top: 434px;
    padding: 40px 20px 20px 20px;
    box-sizing: border-box;
    .dashed-body {
      position: relative;
      height: 100%;
      width: 100%;
      .position-31 {
        width: 150px;
        margin: 0 0 30px 0;
        ._dwon {
          top: -64px;
          left: 80px;
          transform: rotate(90deg);
          &::after {
            width: 56px;
          }
          &::before {
            left: 58px;
          }
        }
        &::after {
          content: "报市执法支队";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: -30px;
          right: -8px;
        }
      }
      .position-32 {
        width: 150px;
        margin: 0 0 30px 0;
        ._dwon {
          top: 26px;
          left: 80px;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 30px;
          }
        }
        &::after {
          content: "市执法支队";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 35px;
          right: 4px;
        }
      }
      .position-33 {
        width: 150px;
        ._dwon {
          top: 86px;
          left: 80px;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 30px;
          }
        }
        &::after {
          content: "市执法支队";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 98px;
          right: 4px;
        }
      }
    }
  }
  .dashed-line_6 {
    position: absolute;
    width: 420px;
    height: 208px;
    left: 46px;
    top: 470px;
    padding: 30px 20px 10px 60px;
    box-sizing: border-box;
    .dashed-body {
      position: relative;
      height: 100%;
      width: 100%;
      .position-34 {
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        ._dwon {
          top: -70px;
          left: 80px;
          transform: rotate(90deg);
          &::after {
            width: 64px;
          }
          &::before {
            display: none;
          }
        }
      }
      .position-35 {
        position: absolute;
        left: 0;
        top: 40px;
        width: 150px;
        ._dwon {
          top: -16px;
          left: 80px;
          transform: rotate(90deg);
          &::after {
            width: 10px;
          }
          &::before {
            display: none;
          }
        }
      }
      .position-36 {
        position: absolute;
        left: 0;
        top: 82px;
        width: 150px;
        ._dwon {
          top: -18px;
          left: 80px;
          transform: rotate(90deg);
          &::after {
            width: 12px;
          }
          &::before {
            display: none;
          }
        }
      }
      .position-37 {
        position: absolute;
        left: 0;
        top: 124px;
        width: 150px;
        ._dwon {
          top: -18px;
          left: 80px;
          transform: rotate(90deg);
          &::after {
            width: 12px;
          }
          &::before {
            display: none;
          }
        }
      }

      .frame-div {
        position: absolute;
        top: 14px;
        left: 149px;
        height: 84px;
        width: 50px;
        border: 1px solid #8c8c8c;
        border-left: 0;
      }

      .position-38 {
        position: absolute;
        right: 0;
        top: 40px;
        width: 108px;
        ._right {
          left: -84px;
          &::after {
            width: 76px;
          }
          &::before {
            left: 78px;
          }
        }
      }
      .position-39 {
        position: absolute;
        right: 0;
        top: 100px;
        width: 108px;
        ._dwon {
          top: -36px;
          left: 54px;
          transform: rotate(90deg);
          &::after {
            width: 30px;
          }
          &::before {
            display: none;
          }
        }
      }
    }
  }

  .position-40 {
    position: absolute;
    top: 702px;
    left: 202px;
    width: 150px;
    ._dwon {
      top: -32px;
      left: 74px;
      transform: rotate(90deg);
      &::after {
        width: 22px;
      }
      &::before {
        left: 25px;
      }
    }
  }

  .dashed-line_7 {
    position: absolute;
    left: 180px;
    top: 744px;
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
    .dashed-body {
      position: relative;
      height: 100%;
      width: 100%;
      .position-41 {
        width: 150px;
        margin-bottom: 30px;
        ._dwon {
          top: -29px;
          left: 76px;
          transform: rotate(90deg);
          &::after {
            width: 20px;
          }
          &::before {
            left: 23px;
          }
        }
      }
      .position-42 {
        width: 150px;
        margin-bottom: 30px;
        ._dwon {
          top: 25px;
          left: 76px;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 30px;
          }
        }
        &::after {
          content: "市执法支队";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 34px;
          right: 6px;
        }
      }
      .position-43 {
        width: 150px;
        ._dwon {
          top: 86px;
          left: 76px;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 30px;
          }
        }
        &::after {
          content: "市执法支队";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 96px;
          right: 6px;
        }
      }
    }
  }

  .position-44 {
    position: absolute;
    top: 818px;
    left: 420px;
    width: 120px;
    ._left {
      left: -54px;
    }
    ._right {
      left: 114px;
    }
  }
  .dashed-line_8 {
    position: absolute;
    left: 588px;
    top: 744px;
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
    .dashed-body {
      position: relative;
      height: 100%;
      width: 100%;
      .position-45 {
        width: 150px;
        margin-bottom: 30px;
      }
      .position-46 {
        width: 150px;
        margin-bottom: 30px;
        ._dwon {
          top: 25px;
          left: 76px;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 30px;
          }
        }
        &::after {
          content: "报市交通局";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 34px;
          right: 6px;
        }
      }
      .position-47 {
        width: 150px;
        ._dwon {
          top: 86px;
          left: 76px;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 30px;
          }
        }
        &::after {
          content: "市交通局";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 96px;
          right: 18px;
        }
      }
    }
  }
  .position-48 {
    position: absolute;
    top: 804px;
    left: 828px;
    width: 102px;
    ._left {
      left: -54px;
    }
    ._right {
      left: 95px;
    }
  }
  .position-49 {
    position: absolute;
    top: 814px;
    left: 977px;
    width: 76px;
    ._right {
      left: 70px;
    }
  }
  .dashed-line_9 {
    position: absolute;
    left: 1100px;
    top: 676px;
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
    .dashed-body {
      position: relative;
      height: 100%;
      width: 100%;
      .position-50 {
        width: 160px;
        margin-bottom: 30px;
      }
      .position-51 {
        width: 160px;
        margin-bottom: 30px;
        ._dwon {
          top: 25px;
          left: 76px;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 30px;
          }
        }
        &::after {
          content: "报市交通局";
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #8c8c8c;
          position: absolute;
          top: 34px;
          right: 6px;
        }
      }
      .position-52 {
        width: 160px;
        ._dwon {
          top: 86px;
          left: 76px;
          transform: rotate(90deg);
          &::after {
            width: 28px;
          }
          &::before {
            left: 30px;
          }
        }
      }
    }
  }

  .active {
    color: #239b53;
    border-color: #239b53;
    &::after {
      color: #239b53 !important;
    }
    &::before {
      border-bottom: 1px solid #239b53 !important;
      background: #239b53 !important;
    }
    .triangle {
      &::after {
        border-bottom: 1px solid #239b53;
      }
      &::before {
        border-bottom: 5px solid #239b53;
      }
    }
  }
  .frame_active_1 {
    border: 1px solid #239b53 !important;
    border-right: 0 !important;
  }
  .frame_active_2 {
    border: 1px solid #239b53 !important;
    border-left: 0 !important;
  }
}
</style>
